/**
* @file 搜索组件
* @author renzhiqiang
* @date 2017-01-20
*/
<template>
  <div class="mui-bar mui-bar-nav bg" :style="{marginTop: top + 'px' }">
    <div style="height:40px;">
      <div>
        <p class="tabs"  :style="{width: width + '%' }" @tap='switch($index)' v-for="obj in configure.ele" v-bind:class="{ 'active': obj.selected}">
          {{obj.text}}
        </p>
      </div>
    </div>
  </div>
</template>
<style lang="less" rel="stylesheet/less">
  @import 'tab.css';
</style>
<script>
  export default{
    props: {
      configure: {} //组件配置属性
    },
    methods: {
      switch: function (evt) { // 头部左右两侧点击事件 回调函数
        this.configure.ele.map((value,idx) =>{
          if(idx == evt){
            value.selected = true ;
          }else {
            value.selected = false ;
          };
          return value ;
        });
        if(typeof this.configure.ele[evt].fn === 'function' ){
          this.configure.ele[evt].fn.bind(this)();
        }
      }
    },
    created:function () {
    },
    computed: {
      top: function () { // 默认高度40
        return this.configure.top || 40
      },
      width: function () {
        return 100 / this.configure.ele.length;
      }
    },
    route: {
      data: function () {

      }
    },
    ready: function () {
//      this.configure.ele = this.configure.ele.map((value, idx) => { // 默认添加一个属性selected,默认第一个选中
//        var vals = {};
//        if(idx == 0) {
//          vals = Object.assign({},value,{selected : true});
//        }else {
//          vals = Object.assign({},value,{selected : false});
//        }
//        return vals ;
//      })
    },
    compiled: function () {
      console.info('aa');
    }
  }
</script>
